<template>
	<view class="">
		<uniStatusBar></uniStatusBar>
		<view class="iconfont icon-guanbi flex align-center justify-center font-lg"
		style="width: 100rpx;height: 100rpx;" hover-class="bg-light" @click="back">
		</view>
		<view class="flex justify-center align-center text-muted mb-3" 
		style="padding-top: 140rpx;padding-bottom: 70rpx;font-size: 50rpx;">
			{{login === 0 ? '账号密码登陆':'手机验证码登陆'}}
		</view>
		<!-- 账号密码登陆 -->
		<view class="px-5" v-if="login === 0">
			<view class="mb-3">
				<input v-model="username" class="border-bottom py-2" type="text" placeholder="昵称/手机号/邮箱" />
			</view>
			<view class="flex align-stretch">
				<input v-model="password" class="border-bottom py-2 flex-1" type="text" placeholder="请输入密码" />
				<view class="border-bottom flex align-center justify-center font-sm text-muted" 
				style="width: 140rpx;">
					忘记密码
				</view>
			</view>
		</view>
		<!-- 手机验证码登陆 -->
		<view class="px-5" v-else>
			<view class="mb-3 flex align-stretch">
				<view class="flex align-center font-md font-weight-bold pr-2 border-bottom">+86</view>
				<input v-model="phone" class="border-bottom flex-1 p-2" type="text" placeholder="手机号" />
			</view>
			<view class="flex align-stretch">
				<input v-model="code" class="border-bottom py-2 flex-1" type="text" placeholder="请输入验证码" />
				<view class="border-bottom flex align-center justify-center font-sm text-muted rounded" 
				style="width: 140rpx;background-color: #EEEEEE;" @click="getCode">
					{{codeTime > 0 ? codeTime + 's' : '获取验证码'}}
				</view>
			</view>
		</view>
		
		<view class="py-3 px-5" style="margin-top: 70rpx;">
			<button class="bg-main text-white" style="border-radius: 50rpx;" type="primary"
			:disabled="disabled" :class="disabled ? 'bg-main-disabled' : ''" @click="submit" 
			:loading="loading"
			>{{loading ? '登陆中...' : '登陆'}}</button>
		</view>
		
		<view class="mt-5 flex align-center justify-center">
			<view class="mr-2 font-sm text-primary" @click="changeLogin">
				{{login === 0 ? '验证码登陆' : '账号密码登陆'}}
			</view>
			<text class="text-muted mx-2" style="color: #CECECE;">|</text>
			<view class="ml-2 font-sm text-primary">登陆遇到问题</view>
		</view>
		
		<view class="flex align-center justify-center mt-3">
			<view style="height: 1rpx;background-color: #cecece;width: 100rpx;"></view>
			<view class="text-muted font-sm mx-2">社交账号登陆</view>
			<view style="height: 1rpx;background-color: #cecece;width: 100rpx;"></view>
		</view>
		<!-- 第三方登陆 -->
		<otherLogin></otherLogin>
		
		<view class="text-center text-muted font-sm mt-5">
			注册即代表您同意
			<text style="color: #2CAEFC;">“开放社区协议”</text>
		</view>
	</view>
</template>

<script>
	import uniStatusBar from '@/components/uni-ui/uni-status-bar/uni-status-bar.vue';
	import otherLogin from '@/components/common/other-login.vue';
	export default {
		components: {uniStatusBar,otherLogin},
		data() {
			return {
				login: 0, // 账号密码登陆
				username: '',
				password: '',
				phone: '',
				code: '',
				codeTime: 0,
				loading:false
			}
		},
		computed:{
			disabled() {
				if ((this.username === '' || this.password === '') && 
				(this.phone === '' || this.code === '')) {
					return true
				}
				return false
			}
		},
		methods:{
			// 调回原页面
			back() {
				uni.navigateBack({
					delta:1
				})
			},
			// 表单内容初始化
			initForm() {
				this.username = '',
				this.password = '',
				this.phone = '',
				this.code = ''
			},
			// 更改登陆方式
			changeLogin() {
				// 切换时需对之前填的内容清空
				this.initForm()
				this.login = (this.login === 0) ? 1 : 0
			},
			// 获取验证码
			getCode() {
				// 防止重复点击
				if (this.codeTime > 0) {
					return
				}
				// 验证手机号
				if (!this.phoneValidate()) return
				this.$H.post('/user/sendcode', {
					phone:this.phone
				},{
					native:true
				}).then(res => {
					uni.showToast({
						title:res.data.msg,
						icon:'none'
					})
					this.codeTime = 3
					// 倒计时
					let timer = setInterval(() => {
						if (this.codeTime >= 1) {
							this.codeTime --
						} else {
							this.codeTime = 0
							clearInterval(timer)
						}
					},1000)
				})
			},
			// 手机号验证
			phoneValidate() {
				let phonePattern = /^[1][3,4,5,7,8,9]\d{9}$/
				if (!phonePattern.test(this.phone)) {
					uni.showToast({
						title:'手机号不正确',
						icon:'none'
					})
					return false
				}
				return true
			},
			// 验证码验证
			codeValidate() {
				let codePattern = /^\d{6}$/
				if (!codePattern.test(this.code)) {
					uni.showToast({
							title:'验证码不正确',
							icon:'none'
						})
						return false
					}
					return true
			},
			// 账号验证
			usernameValidate() {
				let usernamePattern = /^[a-zA-Z0-9_-]{6,16}$/
				if (!usernamePattern.test(this.username)) {
					uni.showToast({
							title:'用户名不正确',
							icon:'none'
						})
						return false
					}
					return true
			},
			// 密码验证
			passwordValidate() {
				let passwordPattern = /^[a-zA-Z0-9_-]{6,16}$/
				if (!passwordPattern.test(this.password)) {
					uni.showToast({
							title:'密码不正确',
							icon:'none'
						})
						return false
					}
					return true
			},
			// 表单验证方法
			validate() {
				// 账号登陆验证
				if (this.login === 0) {
					if (!this.usernameValidate() || !this.passwordValidate()) {
						return false
					}
					return true
				} else {
					// 手机登陆验证
					if (!this.phoneValidate() || !this.codeValidate()) {
						return false
					}
					return true
				}
			},
			// 表单登陆
			submit() {
				let url = ''
				let data = {}
				// 表单验证
				if (!this.validate()) return
				// 账号密码登陆
				if (this.login === 0) {
					url = '/user/login'
					data = {
						username:this.username,
						password:this.password
					}
				} else {
					// 手机登陆
					url = '/user/phonelogin'
					data = {
						phone:this.phone,
						code:this.code
					}
				}
				// 提交后端
				this.loading = true
				// 模拟用户数据
				let user = {
					"id": 7,
					"username": "zcmcss",
					"userpic": "https://tangzhe123-com.oss-cn-shenzhen.aliyuncs.com/Appstatic/qsbk/demo/userpic/1.jpg",
					"password": true,
					"phone": "13450772004",
					"email": "123@qq.com",
					"status": 1,
					"create_time": null,
					"logintype": "username",
					"token": "a8bb3f6f50ff5049d70b6022b48e1f45c24a96f8",
					"userinfo": {
						"id": 1,
						"user_id": 7,
						"age": 23,
						"sex": 1,
						"qg": 1,
						"job": "IT",
						"path": "北京市-市辖区-朝阳区",
						"birthday": "1996-06-12"
					},
					user_bind:{
						"qq": {
							"id": 229,
							"nickname": "airson"
						}
					}
				}
				// -模拟用户数据提交
				this.$store.commit('login',user)
				uni.navigateBack({
					delta:1
				})
				// -结束模拟用户数据提交
				// 正常提交后台代码
				this.$H.post(url, data).then(res => {
					// 登陆成功后的处理
					this.loading = false
					this.$store.commit('login',res)
					uni.navigateBack({
						delta:1
					})
					uni.showToast({
						title:'登陆成功'
					})
				}).catch(err => {
					this.loading = false
				})
			}
		}
	}
</script>

<style>
</style>
